<template>
	<!-- 沉浸式导航占位符 -->
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
	</view>
	<view class="page">
		<!-- 背景定位小图片 -->
		<image class="cloud"
			src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u279.svg"
			mode="widthFix"></image>
		<image class="video"
			src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u282.svg"
			mode="widthFix"></image>
		<image class="firstaid"
			src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u280.svg"
			mode="widthFix"></image>
		<image class="car"
			src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u283.svg"
			mode="widthFix"></image>
		<image class="shield"
			src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u281.svg"
			mode="widthFix"></image>
		<!-- 标题 -->
		<view class="title">
			<view class="hospital">
				智慧医院便民平台
			</view>
			<view class="open">
				开启智慧医疗新时代
			</view>
		</view>
		<!-- 登录选择 -->
		<view class="loginOption">
			<view :class="{option:Options==0}" @click="loginSelect(0)">
				验证码登录
			</view>
			<image style="width: 4rpx;margin: 0 34rpx;"
				src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u262.svg"
				mode="widthFix"></image>
			<view :class="{option:Options==1}" @click="loginSelect(1)">
				密码登录
			</view>
		</view>
		<!-- 登录输入框 -->
		<!-- 验证码登录 -->
		<uni-forms class="forms" ref="customForm" :rules="customRules" v-model="customFormData">
			<!-- 手机号输入框 -->
			<uni-forms-item required name="phone">
				<uni-easyinput v-model="customFormData.phone" maxlength="11" placeholder="请输入您的手机号" />
			</uni-forms-item>
			<!-- 手机验证码输入框 -->
			<uni-forms-item required name="verCode" class="vreCode" v-if="Options==0">
				<uni-easyinput v-model="customFormData.verCode" maxlength="4" placeholder="请输入手机验证码" />
				<view class="getVer" v-html="vervode.data" @click="getVer" v-if="vervode.data">
					
				</view>
				<view class="getVer" @click="getVer" v-else>
					获取验证码
				</view>
				
				<!-- <uni-countdown class="getVer" :show-day = "false" :show-hour="false" :show-minute= "false" :second="60" /> -->
				<view class="prompt">
					验证码登录可一键注册或登录
				</view>
			</uni-forms-item>
			<!-- 密码输入框 -->
			<uni-forms-item class="passward" required name="passward" v-if="Options==1">
				<uni-easyinput type="password" v-model="customFormData.passward" maxlength="8" placeholder="请输入您的密码" />
				<view class="forget" @click="forget">
					忘记密码
				</view>
			</uni-forms-item>
		</uni-forms>
		<!-- 登录按钮 -->
		<button type="primary" class="loginBtn" @click="submit">登 录</button>
		<!-- 微信一键登录 -->
		<view class="wechart">
			<image style="width: 44rpx;"
				src="https://cdn8.axureshop.com/demo/2208121/images/%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7/u286.svg"
				mode="widthFix"></image>
			<view class="wechartText">
				微信一键登录注册
			</view>
		</view>
		<!-- 同意协议 -->
		<checkbox value="cb" :checked="checkbox" @click='changesta' class="checkbox">我已阅读并同意<text class="blue">隐私政策</text><text class="blue">隐私政策</text>和<text class="blue">隐私政策</text></checkbox>
		
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import api from '../../src/utils/api.js'
	// 同意协议复选框
	const checkbox = ref(false)
	const changesta = (e) => {
		checkbox.value = !checkbox.value
	}
 	// 登录方式的切换
	const Options = ref(0)
	const loginSelect = (i) => {
		Options.value = i
		customForm.value.clearValidate()
		customFormData.phone=''
		customFormData.verCode=''
		customFormData.passward=''
	}
	// 自定义表单数据
	const customFormData = reactive({
		phone: '',
		verCode: '',
		passward: ''
	})
	// 自定义表单校验规则
	const customRules = reactive({
		phone: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号',
					trigger: 'blur'
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: '请输入正确的手机号格式',
					trigger: 'blur'
				},
			]
		},
		verCode: {
			rules: [
				{
					required: true,
					errorMessage: '验证码不能为空'
				},
				{
					validateFunction:function(rule,value,data,callback){
						if (value.toLowerCase()!=vervode.value.text.toLowerCase()) {
							callback('请输入正确的验证码')
						}
						return true
					}
				}
			]
		},
		passward: {
			rules: [{
					required: true,
					errorMessage: '密码不能为空'
				},
				{
					pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8}$/,
					errorMessage: '密码由8位数字和字母组成',
					trigger: 'blur'
				}
			]
		}
	})
	// 登录
	// 表单引用
	const customForm = ref(null);
	const loginstate = ref({})
	const submit = () => {
		customForm.value.validate().then(res => {
			// 验证码登录
			if(Options.value==0){
				api('/appuserlists',{
					phone:res.phone
				},'POST').then(res=>{
					loginstate.value = res
					if(checkbox.value){
						
						uni.request({
							url:'http://localhost:3000/login',
							data: {
								username: 'admin',
								password: '123'
							},
							method:'POST'
						}).then(res=> {
							uni.setStorageSync('token', res.data.token);
							uni.showToast({
								title: `登录成功`
							})
							setTimeout(()=>{
								if(loginstate.value.state==200){
									// 已注册直接登录
									uni.setStorageSync('userid',loginstate.value.data[0].user_id)
									uni.switchTab({
										url:'/pages/index/index'
									})
								}else{
									// 未注册先注册
									uni.setStorageSync('userid',loginstate.value.datas.insertId)
									uni.navigateTo({
										url:'/pages/Add_patient/Add_patient?userid='+loginstate.value.datas.insertId
									})
								}
								
							},1000)
						}).catch(err=>{
							console.log(err)
						})
						
					}else{
						uni.showToast({
							title: '请先阅读并并同意隐私政策、用户协议和平台协议',
							icon: 'none'
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			}else{
				api('/appuserpsw',res,'POST').then(res=>{
					
					if(res.state==404){
						uni.showToast({
							title: `账号或密码错误，请重新输入`,
							icon:"none"
						})
					}else{
						uni.setStorageSync('userid',res.data[0].user_id)
						if(checkbox.value){
							uni.request({
								url:'http://localhost:3000/login',
								data: {
									username: 'admin',
									password: '123'
								},
								method:'POST'
							}).then(res=> {
								console.log(res.data.token)
								uni.setStorageSync('token', res.data.token);
								uni.showToast({
									title: `登录成功`
								})
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},1000)
							}).catch(err=>{
								console.log(err)
							})
							
						}else{
							uni.showToast({
								title: '请先阅读并并同意隐私政策、用户协议和平台协议',
								icon: 'none'
							})
						}
					}
				}).catch(err=>{
					console.log(err)
				})
			}
			
			
			
		}).catch(err => {
			console.log('err', err);
			getVer()
			customFormData.verCode=''
			// customForm.value.resetFields();	//重置
		})
	}
	// 忘记密码
	const forget = () => {
		uni.navigateTo({
			url:'/pages/forget/forget'
		})
	}
	// 获取验证码
	const vervode = ref({})
	const getVer = () => {
		uni.request({
			url:'http://localhost:3000/captcha'
		}).then(res=> {
			console.log(res.data)
			vervode.value = res.data
		}).catch(err=>{
			console.log(err)
		})
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.page {
		background-color: #fff;
		min-height: 100vh;
		padding-top: 308rpx;
		padding-left: 76rpx;
		padding-right: 76rpx;
		box-sizing: border-box;
		background-image: url('https://www.ewell.cc/upload/2019/10/08/157050535363737pma1.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom;
	}

	.cloud {
		width: 36rpx;
		position: absolute;
		top: 214rpx;
		left: 44rpx;
		opacity: 0.09;
	}

	.video {
		width: 40rpx;
		position: absolute;
		top: 250rpx;
		left: 162rpx;
		opacity: 0.09;
	}

	.firstaid {
		width: 40rpx;
		position: absolute;
		left: 314rpx;
		top: 210rpx;
		opacity: 0.09;
	}

	.car {
		width: 40rpx;
		position: absolute;
		left: 492rpx;
		top: 264rpx;
		opacity: 0.09;
	}

	.shield {
		width: 40rpx;
		position: absolute;
		left: 632rpx;
		top: 228rpx;
		opacity: 0.09;
	}

	// 标题
	.title {
		// position: absolute;
		// left: 76rpx;
		// top: 308rpx;
		font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
		color: #333;

		.hospital {
			font-size: 52rpx;
			font-weight: 700;
			line-height: 74rpx;
		}

		.open {
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			line-height: 36rpx;
			margin-top: 16rpx;
		}
	}

	// 登录选项
	.loginOption {
		display: flex;
		align-items: center;
		margin-top: 116rpx;
		font-family: 'Microsoft YaHei UI', sans-serif;
		font-size: 28rpx;
		color: #333;
		line-height: 20rpx;
		box-sizing: border-box;

		.option {
			color: rgb(24, 144, 255);
			font-weight: 700;
		}
	}

	// 输入框
	.forms {
		// position: absolute;
		// left: 76rpx;
		// top: 690rpx;
		margin-top: 100rpx;
		width: 100%;
		box-sizing: border-box;
		height: 292rpx;
		background-color: transparent;

		// 验证label前面的星号去除
		::v-deep .uni-forms-item__label {
			display: none !important;
		}

		// 设置输入框的样式
		::v-deep .uni-easyinput__content-input {
			height: 100rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid rgba(215, 215, 215, 1);
			font-size: 26rpx !important;
			padding-left: 10rpx !important;
		}

		// 设置外边框的样式
		::v-deep .is-input-border {
			border: none;
			border-bottom: 2rpx solid #000;
			// border-radius: 0 !important;
			border-radius: 50rpx;
			padding: 0 20rpx;
		}

		// 默认文字样式
		::v-deep .uni-input-placeholder {
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		// 验证码
		.vreCode {
			position: relative;
			
			::v-deep .uni-easyinput__content-input {
				width: 340rpx !important;
				flex: 0 0 340rpx !important;
			}

			.getVer {
				width: 160rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-size: 28rpx;
				color: #1890FF;
			}

			.prompt {
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-size: 24rpx;
				color: #fff;
				position: absolute;
				bottom: -36rpx;
				right: 10rpx;
			}
		}

		// 密码框
		.passward {
			position: relative;
			.forget {
				width: 100%;
				text-align: end;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				bottom: -36rpx;
				right: 20rpx;
				// margin-top: 16rpx;
				// padding-right: 20rpx;
				box-sizing: border-box;
			}
		}

		.form-item {
			display: flex;
			align-items: center;
		}
	}

	// 登录按钮
	.loginBtn {
		width: 600rpx;
		height: 80rpx;
		border-radius: 72rpx;
		background-color: rgba(24, 144, 255, 1);
		margin-top: 84rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(145, 213, 255, 1);
		font-family: 'ArialMT', 'Arial', sans-serif;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 80rpx;
	}

	// 微信一键登录
	.wechart {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 54rpx;

		.wechartText {
			font-family: 'Microsoft YaHei UI', sans-serif;
			color: #7f7f7f;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-left: 12rpx;
		}
	}

	// 同意协议
	.checkbox {
		// width: 100%;
		display: flex;
		font-size: 24rpx;
		color: #000;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		// position: absolute;
		// bottom: 30rpx;
		// left: 50%;
		// transform: translateX(-50%);
		justify-content: center;

		.blue {

			color: #40A9FF;
			margin: 0 5rpx;
		}
	}
</style>